var $image = $('#image');
// - 设置配置项
var option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
$image.cropper(option);
// 需求1：上传图片
// 当点击上传按钮的时候，触发file的点击事件
let layer = layui.layer
$('#chooseImageBtn').on('click', function() {
        $('#chooseImageInp').click()
    })
    // 需求2：当file文件发生改变的时候，将文件的路径保存下来，
    // 保存到虚拟路径里，去掉旧的裁剪区域，将图片的路径改变成虚拟路径的地址，添加新的裁剪区域
$('#chooseImageInp').on('change', function() {
        let file = this.files[0]
        if (file == undefined) {
            return layer.msg('请选择一张图片')
        }
        let newURL = URL.createObjectURL(file)
        $image.cropper('destroy').attr('src', newURL).cropper(option)
    })
    //需求3：
    // 1.确认被点击的时候，将url转成base64格式
    // 2.发送ajax请求
    // 3.将dataURL转成URL编码格式
    // 4.服务器响应，判断服务器响应信息是否正确，错误就将服务器响应的信息，用警示框弹出
    // let dataURL = $image.cropper('getCroppedCanvas', { width: 30, height: 30 }).toDataURL('image/png');;
$('#uploadBtn').on('click', function() {
    let dataURL = $image.cropper('getCroppedCanvas', { width: 30, height: 30 }).toDataURL('image/png');;
    axios({
        url: '/my/update/avatar',
        method: 'POST',
        data: "avatar=" + encodeURIComponent(dataURL)

    }).then(({ data: res }) => {
        //成功回调
        console.log(res)
        if (res.status != 0) {
            return layer.msg(res.message)

        }
        layer.msg("恭喜你。修改头像成功")
        window.parent.getUserInfo()
    });
})